<!doctype html>
<html lang="en-US">
  <head>
    <style>
      @layer reset, theme, global, layout, modules, utilities;

      @layer reset {
        *,
        *::before,
        *::after {
          box-sizing: border-box;
        }

        body {
          margin: unset;
        }

        button,
        input,
        textarea,
        select {
          font: inherit;
        }

        img,
        picture,
        svg,
        canvas {
          display: block;
          max-inline-size: 100%;
          height: auto;
        }

        @media (prefers-reduced-motion: reduce) {
          *,
          *::before,
          *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
            scroll-behavior: auto !important;
          }
        }
      }
    </style>
  </head>
  <body>
    <h1>Example heading</h1>
  </body>
</html>
